<template>
	<div>
		<van-nav-bar
		  title=""
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
	</div>
	<div style="margin-top: 50px;">
		<van-row>
		  <van-col span="2"></van-col>
		  <van-col span="20">


        <!-- 通过 validator 进行函数校验 -->
        <van-field
            v-model="user.phone"
            center
            clearable
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ validator, message: '请输入正确手机号' }]"
            @change="ckPhone()()"
        >
        </van-field>
        <van-field
            v-model="user.code"
            center
            clearable
            label="验证码"
            placeholder="请输入短信验证码"
            :rules="[{ validator, message: '请输入正确的验证码' }]"
            @change="ckCode()()"
        >
          <template #button>
            <van-button size="small" type="primary" :disabled="btnflag" @click="sendCode()">{{btnmsg}}</van-button>
          </template>
        </van-field>
		<van-field
		    v-model="user.password"
		    error
		    required
			type="password"
		    label="密码"
		    placeholder="请输入密码"
			:rules="[{ required: true, message: '请输入密码' }]"
		  />
		  <van-field
		      v-model="password2"
		      error
		      required
			  type="password"
		      label="确认密码"
		      placeholder="再次确认密码"
		  	  :rules="[{ required: true, message: '再次确认密码' }]"
		    />
			<h6>未注册手机验证后自动登录, 注册即代表同意《知乎协议》《隐私保护指引》</h6>

	
	<div style="margin: 16px;">
	  <van-button round block type="primary" :disabled="isbtnlogin" @click="register()">
	    注册
	  </van-button>
	</div>
	<div style="margin-top: 16px;">
		<van-row>
		  <van-col span="8"><router-link to="/login">登录账号</router-link></van-col>
		  <van-col span="8"></van-col>
		  <van-col span="8"><router-link to="/findpass">忘记密码?</router-link></van-col>
		</van-row>
	</div>
	</van-col>
	  <van-col span="2"></van-col>
	</van-row>
	
	</div>
</template>

<script>
	export default {
	setup() {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    const validator = (val) => /1[3-9]{1}\d{9}/.test(val);
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
    return {
      validator
    };
	},
	  data(){
	  	  return{
          user:{},
          btnmsg:"发送验证码",
          btntime:60,
          btnflag:true,
	  		  password2:"",

	  	  }
	  },methods:{
	  	  //校验手机号是否可用
	  	  ckPhone(){
	  		  this.axios.get("/api/user/checkphone.do?phone="+this.user.phone).then((res) => {
	  			 if(res.data.code==200){
	  				 //可用
	  				this.$toast.success('恭喜你，手机号可用');
             this.btnflag=false;
	  			 }else{
	  				 //存在，不可用
	  				 this.$toast.fail('手机号已在，可登录');
	  			 }
	  		  });
	  	  },
	  	  //发送手机验证码
	  	  sendCode(){
          this.btnmsg="重新发送("+this.btntime+"s)";
          this.btnflag=true;
	  	  		  this.axios.post("/api/sms/sendRegistionCode.do?phone="+this.user.phone).then((res) => {
	  	  			 if(res.data.code==200){
	  	  				 //可用
	  	  				this.$toast.success('验证码已发送，请注意查收');
                 this.btnflag=false;
                 //重复执行，每秒一次
                 var r=setInterval(()=>{
                   if(this.btntime>0){
                     this.btntime--;
                     this.btnmsg="重新发送("+this.btntime+"s)";
                   }else{
                     //结束定时任务
                     clearInterval(r);
                     this.btnmsg="重新发送";
                     this.btnflag=false;
                     this.btntime=60;
                   }
                 },1000);
	  	  			 }else{
	  	  				 //存在，不可用
	  	  				 this.$toast.fail('网络异常');
	  	  			 }
	  	  		  });
	  	  },
		    
	  	  //校验手机号的验证码是否正确
	  	  ckCode(){
	  			  var uc={
	  				  phone:this.user.phone,
	  				  code:this.code
	  			  }
	  	  		  this.axios.post("/api/sms/checkSmsCode.do",uc).then((res) => {
	  	  			 if(res.data.code==200){
	  	  				 //可用
	  	  				this.$toast.success('验证码校验成功');
	  	  				this.isbtnlogin=false;
	  	  			 }else{
	  	  				 //存在，不可用
	  	  				 this.$toast.fail('验证码错误，请检查');
	  	  			 }
	  	  		  });
	  	  },
	  	  //实现账号的注册
	  	  register(){
	  		  var that=this;
	  		  this.axios.post("/api/user/register.do",this.user).then((res) => {
	  		    console.log(res.data)
	  			if(res.data.code==200){
	  				//更新令牌
	  				this.$store.commit("setToken",res.data.data);
	  				//吐司，短暂的弹出窗，默认3秒自动消失
	  				this.$toast.success('注册成功，跳转到主页面');
	  				//成功-跳转到主页
	  				this.$router.push("/");
	  			}else{
	  				this.$toast({
	  				  message: "亲，网络异常",
	  				  icon: 'close'
	  				});
	  			}
	  		  })
	  	  }
	  }
	  
	}
	
	
</script>

<style >
	   
</style>
